<template>
	<view class="smian">
		<!-- 三点评吸 -->
		<view class="table">
			<view class="head">
				<view class="one felx_class">牌号</view>
				<view class="two felx_class">请选择判定结果（点击选择的结果，然后提交即可）</view>
				<view></view>
			</view>
			<view class="tabItem" v-for="item in tableData" :key="item.id">
				<view class="item one felx_class">{{item.allowanceName}}</view>
				<view class="list two">
					<view :class="['i',item.conclusion == ele.value?'on':'']"
						v-for="ele in resultData" :key="ele.id" >{{ele.value}} </view>
				</view>
				<view></view>
			</view>

		</view>
	
	</view>
</template>

<script>
	export default{
		name: 'threeHistory',
		props:{
			tableData: {
				type: Array,
				default: function() { return [] }
			}
		},
		data() {
			return {
				resultData: [{
					value: "1=2",
					id: 1
				}, {
					value: "1=3",
					id: 2
				}, {
					value: "2=3",
					id: 3
				}],
			}
		}
	}
</script>

<style scoped lang="scss">
	.table {
		width: 678rpx;
		margin: 0 auto;
		padding-bottom: 100rpx;
		
		.felx_class {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.one {
			width: 200px;
		}
		.two {
			flex: 1;
		}
		.three {
			width: 150px;
		}
	
		.head {
			height: 29rpx;
			background: #F3FFF9;
			border-radius: 3rpx;
			opacity: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #6C9789;
			font-weight: bold;
			font-size: 11rpx;
			padding: 0 20rpx;
		}
	
	
	
		.tabItem {
			height: 43rpx;
			background: #F8F8F8;
			border-radius: 3rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			margin-top: 10rpx;
	
			.item {
				width: 15%;
				font-weight: 400;
				color: #333333;
				color: #333333;
			}
	
			.list {
				display: flex;
				justify-content: center;
				align-items: center;
				// flex: 1;
				width: 70%;
	
				// margin: 0 140rpx;
				.i {
					width: 57rpx;
					height: 27rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					opacity: 1;
					font-weight: 400;
					color: #999999;
					font-size: 11rpx;
					line-height: 27rpx;
					text-align: center;
					overflow: hidden;
					margin: 0 20px;
				}
	
				.on {
					border: 1rpx solid #27B186;
				}
			}
	
			.btn {
				width: 57rpx;
				height: 27rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				line-height: 27rpx;
				text-align: center;
				font-size: 11rpx;
				color: #999999;
			}
	
			.btnOn {
				background: linear-gradient(132deg, #68DC8F 0%, #27B186 100%);
				color: #FFFFFF;
			}
		}
	
	}
	
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;
	
			&:hover {
				opacity: 0.5;
			}
	
			// &:last-child{
			// 		background-image: url(../../../static/Rectangle113.png);
			// 		margin-left: 41rpx;
			// }
		}
	}
</style>